<!DOCTYPE html>
<html>
	<!--信息录入--> 
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<span>姓名</span>
				<input type="text" v-model="newPerson.name" placeholder="请输入学生姓名" />
			</div>
			<div>
				<span>年龄</span>
				<input type="text" v-model="newPerson.age" placeholder="请输入学生年龄" />
			</div>
			<div>
				<span>性别</span>
				<select v-model="newPerson.sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div>
				<span>手机号</span>
				<input type="text" v-model="newPerson.phone" placeholder="请输入手机号" />
			</div>  
			<button @click="createNew">创建新用户</button>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>手机号</td>
						<td>操作</td>
					
					</tr>
					
				</thead>
				<tbody>
					 <tr v-for="(person, index) in persons" :key="index">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
                    <td>{{ person.phone }}</td>
                    <td>
                        <button @click="remove(index)">删除</button>
                    </td>
                </tr>
					
				</tbody>
					
			</table>
			
		</div>
		
	</body>
	<script type="text/javascript" src="js/vue.js" ></script>
	
	<script>
			new Vue({
			el:"#app",
			data:{
				newPerson:{
					name:'',
					age:'',
					sex:'',
					phone:''
				},
			persons:[
					{name:"老刘1",age:18,sex:'男',phone:'1234'},
					{name:"老刘2",age:11,sex:'男',phone:'1232'},
					{name:"老刘3",age:12,sex:'女',phone:'1233'},
					{name:"老刘4",age:13,sex:'男',phone:'1235'}]
			},
			  methods: {
                createNew: function () {
                    if (this.newPerson.name === "" || this.newPerson.age === "" || this.newPerson.sex === "" || this.newPerson.phone === "") {
                        alert("输入不能为空");
                    } 
  
                    else {
                          var newPersonObject = {
                            name: this.newPerson.name,
                            age: this.newPerson.age,
                            sex: this.newPerson.sex,
                            phone: this.newPerson.phone
                        };
                        this.persons.push(newPersonObject);
                        this.newPerson = { name: '', age: '', sex: '', phone: '' };
                    }
                },
                remove: function (index) {
                    this.persons.splice(index, 1);
                }
            }
			})
				//删除的方法  数组.splice(index,1)
	</script>
</html>
